<mwl-demo-utils-calendar-header [(view)]="view" [(viewDate)]="viewDate" />

<div class="alert alert-info">
  <div>
    @switch (view) { @case ('month') {
    <span>Click on a month label to change the view to that month.</span>
    } @case ('week') {
    <span>Click on a day header to change the view to that day.</span>
    } @case ('day') {
    <span>There is no other view to navigate to.</span>
    } }
  </div>
</div>

<div>
  @switch (view) { @case ('month') {
  <mwl-calendar-month-view
    [viewDate]="viewDate"
    [events]="events"
    (dayClicked)="changeDay($event.day.date)"
  />
  } @case ('week') {
  <mwl-calendar-week-view
    [viewDate]="viewDate"
    [events]="events"
    (dayHeaderClicked)="changeDay($event.day.date)"
  />
  } @case ('day') {
  <mwl-calendar-day-view [viewDate]="viewDate" [events]="events" />
  } }
</div>
